<script lang="ts" setup name="CommonTypesDialog">
import { FormInstance } from 'element-plus'
import { Dialog } from '~/src/api/interface'
import { Procure } from '~/src/api/interface/procure'

const dialogProps = reactive<Dialog<Procure.BreakageResult>>({
  visible: false,
  data: {
    commTypeId: 1,
    customeCode: '',
    id: 0,
    name: '',
    status: 1,
  },
  title: '',
})
const rules = reactive({
  name: [{ required: true, message: '请填写类型名称' }],
  customeCode: [{ required: true, message: '请填写类型编码' }],
  commTypeId: [{ required: true, message: '请选择通用类型' }],
})
const { visible, title } = toRefs(dialogProps)
interface Props {
  visible: boolean
  row?: {
    commTypeId: number
    id: number
    name: string
    status: number
    customCode: string
  }
  title: string
}

// 接收父组件传过来的参数
const acceptParams = (params: Dialog<Procure.BreakageResult>) => {
  console.log(params)
  Object.assign(dialogProps, params)
  dialogProps.visible = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.api!(dialogProps.data)
      ElMessage.success({ message: `${dialogProps.title}类型成功！` })
      dialogProps.getTableList!()
      dialogProps.visible = false
    } catch (error) {
      console.log(error)
    }
  })
}

watch(
  () => dialogProps.visible,
  (val) => {
    if (!val) ruleFormRef.value?.resetFields()
  }
)
defineExpose({
  acceptParams,
})
</script>

<template>
  <vab-dialog v-model:modelValue="visible" :title="title + '通用类型'" :width="600">
    <el-form ref="ruleFormRef" label-suffix="：" label-width="130px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="编码" prop="customeCode">
        <el-input v-model="dialogProps.data!.customeCode" clearable placeholder="请填写" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="dialogProps.data!.name" clearable placeholder="请填写" />
      </el-form-item>
      <el-form-item label="通用类型" prop="commTypeId">
        <el-select v-model="dialogProps.data!.commTypeId" placeholder="请选择">
          <el-option v-for="item in dialogProps.list" :key="item.value" :label="item.description" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="助记码" prop="alias">
        <el-input v-model="dialogProps.data!.alias" clearable disabled placeholder="请填写" />
      </el-form-item>
      <!-- <el-form-item label=类型状态" prop="status">
        <el-radio-group v-model="dialogProps.row!.status">
          <el-radio v-for="item in generalStatus" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="dialogProps.row!.contact" placeholder="请填写" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dialogProps.row!.mobile" placeholder="请填写" clearable />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="dialogProps.row!.address" placeholder="请填写" clearable />
      </el-form-item>
      <el-form-item label="标签" prop="tag">
        <el-input v-model="dialogProps.row!.tag" placeholder="请填写" clearable />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
